<template>
  <div class="asd" v-show="showloading">
    <loading ></loading>
  </div>
  <div class="allcomment-card">
    <div class='allcomment'>
      <div class="input-div">
        <img :src="localStorageUserRef.avatar" alt="">
        <textarea class="comment-content" name="comment_content" id="comment_content" v-model="commentValue"></textarea>
        <a class="a" @click="zfabiao">评论</a>
      </div>
      <!-- 总评论 -->
      <div v-for="(item) in commentValuelistRef" :key="item.id">
        <div class="allcomment-all" >
          <img :src="item.avatar" alt="">
          <div>
            <span class="span">{{item.nickname+ '：'}}</span>
            {{item.content}}
          </div>
          <span class="huifu" @click="openCommentValueSon(item.id)">回复</span>
          <a class="ass" @click="deletecomment(item.id)" v-if="localStorageId=== item.userId || ifbenren">删除</a>
        </div>
        <div v-if="qianshowRef === item.id">
          <input type="text" class="is" v-model="commentValueSon">
          <a class="as" @click="sfabiao(item.id)">发表</a>
        </div>
        <!-- 回复评论 -->
        <div class="comment-son" v-for="item2 in item.replyComments" :key="item2.id">
          <div>
            <div>
              <img :src="item2.avatar" alt="">
              <span class="span">{{item2.nickname+ '：'}}</span>
              {{item2.content}} 
            </div>
            <span class="huifu" @click="openCommentValueSonSon(item2.id)">回复</span>
            <a class="ass" @click="deletecomment(item2.id)" v-if="localStorageId=== item2.userId || ifbenren">删除</a>
          </div>
          <div v-if="item2.id === qianshowRef">
          <input type="text" class="is2" v-model="commentValueSonSon">
          <a class="ass" @click="ssfabiao(item2.id)">发表</a>
        </div>
        </div>
      </div>
    </div>
    <div class="noping" v-if="ifnull">没有更多的评论了</div>
    <div class="noping" v-if="!ifnull">下滑更多评论</div>
    
  </div>
</template>

<script lang='ts'>
import { defineComponent, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import { commentaddAPI, delectcommentAPI, getByBlogIdcommentAPI } from '../../api/artice'
import { getUserByIdAPI } from '../../api/userAPI'
import UseLocalStorage from '../../tool/UseLocalStorage'
import {Iloginmsg} from '../../views/login/esType'
import {
  IgetByBlogIdcommentAPI
} from '../../api/artice'
import { succ1, warning1 } from '../../tool/ElMessageAny'
import { useRoute } from 'vue-router'
import loading from '../../components/Loading/index.vue'

export default defineComponent({
  name: '',
  props: ['aritcesId'],
  components: {
    loading
  },
  setup (props: any) {
    // loading
    const showloading = ref<boolean>(false)
    // 文章评论
    const commentValue = ref<string>('')
    const commentValuelistRef = ref<any>([])
    const commentValuelistRef2 = ref<any>([])
    // 文章评论的评论
    const commentValueSon = ref<string>('')
    const iscommentValueSon = ref<boolean>(false)
    const openCommentValueSon = (id: any) => {
      if(qianshowRef.value === id) {
        qianshowRef.value = -1
        return
      }
      qianshowRef.value = id
    }
    // 文章评论的评论的评论
    const commentValueSonSon = ref<string>('')
    // 要显示的回复按钮
    const qianshowRef = ref<any>('')
    const iscommentValueSonSon = ref<boolean>(true)
    const openCommentValueSonSon = (id: any) => {
      if(qianshowRef.value === id) {
        qianshowRef.value = -1
        return
      }
      qianshowRef.value = id      
    }
    
    // 本地存储
    const { localStorageId } = UseLocalStorage()
    // 本地用户信息
    const localStorageUserRef = ref<Iloginmsg>({}) 
    // 获取本地用户信息
    const getlocalStorageUserRef = async (): Promise<void> => {
      const res = await getUserByIdAPI(localStorageId)
      localStorageUserRef.value = res.data.data
      console.log(res)
    }
    // 下拉数据提示
    const ifnull = ref<boolean>(false)
    // 获取评论
    const page = ref<number>(1)
    const commentMsg = reactive<IgetByBlogIdcommentAPI>({
      page: 0,
      blogId: props.aritcesId
    })
    const ifgetcommentFRef = ref<boolean>(false)
    const getcommentF = async (page: number): Promise<void> => {
      if(ifnull.value && page !== 1) {
        return;
      }
      if(ifgetcommentFRef.value) {
        return
      }
      showloading.value = true
      if(page>=2) {
        commentMsg.page = page
        const res = await getByBlogIdcommentAPI(commentMsg)
        
         commentValuelistRef2.value = res.data.data
         if(commentValuelistRef2.value.length === 0) {
          setTimeout(() => ifnull.value = true, 1000)
          showloading.value = false
          return
        } 
         commentValuelistRef.value.push(...commentValuelistRef2.value)
         showloading.value = false
         return
      }
      commentMsg.page = page
      ifgetcommentFRef.value = true
      const res = await getByBlogIdcommentAPI(commentMsg)
      if(res.data.code === 200) {
        ifgetcommentFRef.value = false
        commentValuelistRef.value = res.data.data
        showloading.value = false
        if(commentValuelistRef.value.length < 10) {
          ifnull.value = true
        }
      }
      
           
    }
    // 发表评论
    const zfabiaoMsg = reactive<any>({
      userId: localStorageId,
      content: commentValue.value,
      avatar: '',
      parentCommentId: -1,
      blogId: props.aritcesId,
      nickname: ''
    })
    const zfabiao = async (): Promise<void> => {
      if(commentValue.value === '') {
        warning1('请输入内容')
        return;
      }
      showloading.value = true
      const resuser = await getUserByIdAPI(localStorageId)
      zfabiaoMsg.avatar = resuser.data.data.avatar
      zfabiaoMsg.nickname = resuser.data.data.nickname
      zfabiaoMsg.content = commentValue.value
      const res = await commentaddAPI(zfabiaoMsg)
      console.log(res);
      
      if(res.data.code === 200) {
        succ1('评论成功')
        page.value = 1
        ifnull.value = false
        getcommentF(1)
      }
      showloading.value = false
      commentValue.value = ''
    }
    // 回复评论
    const sfabiaoMsg = reactive<any>({
      userId: localStorageId,
      content: commentValue.value,
      avatar: '',
      parentCommentId: -1,
      blogId: props.aritcesId,
      nickname: ''
    })
    const sfabiao = async (id: any): Promise<void> => {
      if(commentValueSon.value === '') {
        warning1('请输入内容')
        return;
      }
      showloading.value = true
      const resuser = await getUserByIdAPI(localStorageId)
      sfabiaoMsg.avatar = resuser.data.data.avatar
      sfabiaoMsg.nickname = resuser.data.data.nickname
      sfabiaoMsg.content = commentValueSon.value
      sfabiaoMsg.parentCommentId = id
      const res = await commentaddAPI(sfabiaoMsg)
      
      if(res.data.code === 200) {
        succ1('评论成功')
        page.value = 1
        ifnull.value = false
        getcommentF(page.value)
      }
      commentValueSon.value = ''
      qianshowRef.value = -1
    }
    // 回复评论的回复
    const ssfabiaoMsg = reactive<any>({
      userId: localStorageId,
      content: commentValue.value,
      avatar: '',
      parentCommentId: -1,
      blogId: props.aritcesId,
      nickname: ''
    })
    const ssfabiao = async (id: any): Promise<void> => {
      if(commentValueSonSon.value === '') {
        warning1('请输入内容')
        return;
      }
      const resuser = await getUserByIdAPI(localStorageId)
      ssfabiaoMsg.avatar = resuser.data.data.avatar
      ssfabiaoMsg.nickname = resuser.data.data.nickname
      ssfabiaoMsg.content = commentValueSonSon.value
      ssfabiaoMsg.parentCommentId = id
      const res = await commentaddAPI(ssfabiaoMsg)
      
      if(res.data.code === 200) {
        succ1('评论成功')
        getcommentF(page.value)
      }
      commentValueSonSon.value = ''
      qianshowRef.value = -1
    }
    // 删除评论
    const deletecomment = async (id: any) => {
      showloading.value = true
      const res = await delectcommentAPI(id)
      if(res.data.code === 200) {
        setTimeout(() => {
          succ1('删除成功')
          ifnull.value = false
          getcommentF(1)
        }, 50)
      }
    }
    // 判断是否本人看文章
    const route = useRoute()
    const ifbenren = ref<boolean>(route.query.userID == localStorageId)

    // 获取滚动条当前的位置
    const getScrollTop = () => {
      let scrollTop = 0
      if (document.documentElement && document.documentElement.scrollTop) {
          scrollTop = document.documentElement.scrollTop
      } else if (document.body) {
          scrollTop = document.body.scrollTop
      }
      return scrollTop
    }
    // 获取当前可视范围的高度
    const getClientHeight = () => {
      let clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
          clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
      } else {
          clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
      }
      return clientHeight
    }
    // 获取文档完整的高度
    const getScrollHeight = () => {
      return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
    }
    // 可续函数
    const qianrun = () => {      
      if(getScrollHeight() - getClientHeight() - getScrollTop() <= 5) {
        page.value++
        console.log(page.value);
        
        console.log(page.value);
        
        getcommentF(page.value)
      }
    }
    onMounted(() => {
      getlocalStorageUserRef()
      getcommentF(page.value)
      document.addEventListener('scroll', qianrun, true);
    })
    onBeforeUnmount(() => {
      document.removeEventListener("scroll", qianrun);
    })
    return {
      commentValue,
      commentValueSon,
      iscommentValueSon,
      openCommentValueSon,
      commentValueSonSon,
      iscommentValueSonSon,
      openCommentValueSonSon,
      localStorageUserRef,
      commentValuelistRef,
      zfabiao,
      deletecomment,
      qianshowRef,
      sfabiao,
      ssfabiao,
      ifnull,
      ifbenren,
      localStorageId,
      showloading
    }
  }
})
</script>

<style lang='scss' scoped>
.asd{
    width: 100vw;
    height: 100vh;
    padding: 0.8rem;
    box-sizing: border-box;
    position: fixed;
    left: 50%;
    margin-left: -50vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5000;
    border-radius: 5px;
}
.ass{
  color: red;
  cursor: pointer;
  margin-left: 30px;
  min-width: 28px;
}
.allcomment-card{
  margin-top: 20px;
  background-color: #fff;
  padding: 16px;
  max-width: 1010px;
}
 // 评论
.comment{
  margin-top: 20px;
  margin-bottom: 20px;
  width: 1010px;
  background-color: #fff;
  padding: 16px;
  .input-div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #fff;
    }
    textarea{
      width:843px;
      height: 32px;
       padding: 6px 8px;
      background: rgba(248,249,251,0.8);
      border: 1px solid #dadde0;
      border-radius: 4px;
      resize: none;
      height: 36px;
      font-size: 14px;
      line-height: 22px;
    }
    .a{
      width: 80px;
      height: 36px;
      background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
      border-radius: 4px;
      font-weight: 500;
      color: #fff;
      font-size: 14px;
      text-align: center;
      line-height: 36px;
      margin-left: 8px;
      border: none;
      cursor: pointer;
    }
    .a:hover{
      background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
    }
  }
}
.allcomment-all{
  font-size: 14px;
  vertical-align: top;
  word-wrap: break-word;
  display: flex;
  margin-top: 10px;
  align-items: flex-end;
  gap: 10px;
  img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #fff;
  }
  .time{
    color: rgb(175, 175, 175);
  }
}
.comment-son{
  margin-left: 30px;
  border-left: 2px solid rgb(214, 214, 214);
  padding: 5px;
  font-size: 14px;
  vertical-align: top;
  word-wrap: break-word;
  // display: flex;
  // align-items: center;
  gap: 10px;
  img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #fff;
  }
  .time{
    color: rgb(175, 175, 175);
  }
}
.huifu{
  color: #949494;
  cursor: pointer;
  margin-left: 45px;
  min-width: 28px;
}
.as{
  width: 80px;
  height: 36px;
  background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
  border-radius: 4px;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  margin-left: 8px;
  border: none;
  cursor: pointer;
  padding: 5px;
}
.is , .is2{
  width:843px;
  height: 32px;
  padding: 6px 8px;
  background: rgba(248,249,251,0.8);
  border: 1px solid #dadde0;
  border-radius: 4px;
  resize: none;
  height: 36px;
  font-size: 14px;
  line-height: 22px;
}
.is2{
  margin-left: 30px;
}
.span{
  min-width: 80px;
  color: skyblue;
}
.qian{
  display: flex;
  align-items: flex-end;
}
.noping{
  border-top: 1px solid;
  padding: 16px;
  margin-top: 16px;
  text-align: center;
}
</style>
